<template>
	<i-popup v-if="modelValue" :body="false">
		<view class="vip_bg">
			<view class="back_body">
				<view class="back_title">
					<text>会员尊享</text>
					<view class="back_price">
						本单立减 <text>{{price}}</text> 元
					</view>
					<text class="no_price">原价 ￥{{originalPrice}}</text>
				</view>
				<view class="back_button">
					<i-buttons @click="tovipPay" color="#1F1B16" bgColor="#EFD6BF" size="32rpx" border="#EFD6BF"
						radius="44" padding="22rpx 132rpx">开通会员</i-buttons>
					<view class="gopay" @click="confirm">
						继续支付
					</view>
				</view>
			</view>
			<image class="close" src="../../static/images/close_black_icon.png" @click="close"></image>
		</view>
	</i-popup>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	import { navTo } from '../../utils/common'
	defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		price: {
			type: Number,
			default: 0
		},
		originalPrice: {
			type: Number,
			default: 0
		},

	})
	const emit = defineEmits([
		'confirm',
		'update:modelValue'
	])

	const close = () => {
		emit('update:modelValue', false)
	}
	const tovipPay = () => {
		navTo('/pages/views/vip_center', 'navigateTo')
		emit('update:modelValue', false)
	}
	const confirm = () => {
		emit('confirm')
		emit('update:modelValue', false)
	}
</script>

<style lang="scss" scoped>
	.vip_bg {
		width: calc(100% - 152rpx);
		margin: 0 auto;
		@include flexCC;

		.back_body {
			width: 100%;
			height: 736rpx;
			background: url(https://tyj-apk-1258993110.cos.ap-nanjing.myqcloud.com/new_app/vip_bg.jpg) no-repeat center;
			background-size: 100%;
			@include flexC;
			justify-content: space-between;

			.back_title {
				@include flexC;
				margin-top: 24rpx;
				margin-left: 84rpx;
				@include dfont(48rpx);
				color: #663F2B;
				@include dWeight;

				.back_price {
					@include flexR;
					@include dfont(36rpx);
					color: #663F2B;
					@include dWeight;
					margin-top: 12rpx;
					margin-bottom: 8rpx;

					text {
						color: #FB652E;
						padding: 0 6rpx;
					}
				}

				.no_price {
					@include dprice(26rpx);
					color: #663F2B;
					text-decoration: line-through;
					margin-bottom: 3rpx;
				}
			}

			.back_button {
				width: 100%;
				@include flexCC;

				.gopay {
					@include dfont;
					margin: 40rpx 0;
					color: #EFD6BF;
				}
			}
		}

		.close {
			width: 80rpx;
			height: 80rpx;
			margin-top: 40rpx;
		}
	}
</style>